<template>
    <div class="box">
        <div class="box_top">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
                <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
                <el-breadcrumb-item>新增商协议</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="title">新增商协议</div>
        </div>
        <div class="box_dashed">
            <div class="box_dashed_box"></div>
            <div class="box_dashed_txt">
                <div class="box_dashed_txt_img">1</div>
                <div class="box_dashed_txt_txt">协议主体</div>
            </div>
            <div class="box_dashed_box"></div>
        </div>
        <div class="box_bottom">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="协议客户:" prop="name">
                            <el-col :span="5">
                                <el-button class="form_btn">选择客户</el-button>
                            </el-col>
                            <span class="form_txt">上海正也医药有限公司</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="协议状态:" prop="name">
                            <el-col :span="10">
                                <el-select v-model="value" placeholder="正常" class="form_select">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="购进指标:">
                            <el-row class="row" :gutter="20">
                                <el-col :span="5" class="col">
                                    <el-select v-model="value1" placeholder="金额" class="form_btn">
                                        <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input" placeholder="输入金额/数量"></el-input>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纯销指标:" prop="name">
                            <el-row class="row" :gutter="20">
                                <el-col :span="5" class="col">
                                    <el-select v-model="value2" placeholder="金额" class="form_btn">
                                        <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="16">
                                    <el-input v-model="input1" placeholder="输入金额/数量"></el-input>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="销售区域:">
                            <el-row class="row" :gutter="20">
                                <el-col :span="5" class="col">
                                    <el-button class="form_btn">选择区域</el-button>
                                </el-col>
                                <el-col :span="8">
                                    <el-tag closable>
                                        全国
                                    </el-tag>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="签订时间:" prop="name">
                            <el-col :span="20" class="col">
                                <el-input v-model="input2" placeholder="输入时间"></el-input>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="购进渠道:">
                            <el-row class="row" :gutter="20">
                                <el-col :span="5" class="col">
                                    <el-select v-model="value3" placeholder="指定渠道" class="option">
                                        <el-option class="option" v-for="item in options3" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-button class="form_btn">请选择渠道</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21" :offset="2">
                        <el-row class="tab_row">
                            <el-col class="tab_col1" :span="9" :offset="1">指定渠道编码</el-col>
                            <el-col class="tab_col1" :span="10">指定渠道名称</el-col>
                            <el-col class="tab_col1" :span="4">所在省</el-col>
                        </el-row>
                        <el-row class="tab_row1">
                            <el-col class="tab_col2" :span="9" :offset="1">BJ000090</el-col>
                            <el-col class="tab_col2" :span="10">宁波九州通药业有限公司</el-col>
                            <el-col class="tab_col2" :span="4">浙江省</el-col>
                        </el-row>
                        <el-row class="tab_row1">
                            <el-col class="tab_col2" :span="9" :offset="1">BJ000090</el-col>
                            <el-col class="tab_col2" :span="10">宁波九州通药业有限公司</el-col>
                            <el-col class="tab_col2" :span="4">浙江省</el-col>
                        </el-row>
                        <el-row class="tab_row1">
                            <el-col class="tab_col2" :span="9" :offset="1">BJ000090</el-col>
                            <el-col class="tab_col2" :span="10">宁波九州通药业有限公司</el-col>
                            <el-col class="tab_col2" :span="4">浙江省</el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="box_dashed">
            <div class="box_dashed_box"></div>
            <div class="box_dashed_txt">
                <div class="box_dashed_txt_img">2</div>
                <div class="box_dashed_txt_txt">产品策略</div>
            </div>
            <div class="box_dashed_box"></div>
        </div>
        <div class="box_bottom1">
            <el-row :gutter="10">
                <el-col :span="2">
                    <el-button type="primary" class="form_btn">添加产品</el-button>
                </el-col>
                <el-col :span="5" class="col_txt">
                    购进总指标（万元）：<span class="col_txt_tx1">￥152.65</span>
                </el-col>
                <el-col :span="12" class="col_txt">
                    指标按季度分解（万元）：<span class="col_txt_tx1">【Q1】￥12.5，【Q2】￥12.5，【Q3】￥12.5，【Q4】￥12.5</span>
                </el-col>
                <el-col :span="5" class="col_txt">
                    纯销总指标（万元）：<span class="col_txt_tx1">￥152.65</span>
                </el-col>
            </el-row>
        </div>
        <div class="box_bottom">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
                <el-row class="products_top">
                    <el-col :span="8">
                        <el-form-item label="产品:" class="el-form-item1">
                            <el-row class="row" :gutter="20">
                                <el-col :span="6" class="col">
                                    <el-button class="form_btn">选择产品</el-button>
                                </el-col>
                                <el-col :span="18">
                                    <span class="txt_color">美复胶丸 24粒/盒</span>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="协议效期:" prop="name" class="el-form-item1">
                            <el-col :span="20" class="col">
                                <el-input v-model="input3" placeholder="输入时间"></el-input>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="products_center">
                    <el-row :gutter="10" class="products_row1">
                        <el-col :span="3" class="products_col">
                            协议价（元）
                        </el-col>
                        <el-col :span="3" class="products_col">
                            票折（元）
                        </el-col>
                        <el-col :span="3" class="products_col">
                            购进指标量（大单位）
                        </el-col>
                        <el-col :span="3" class="products_col">
                            购进指标量（小单位）
                        </el-col>
                        <el-col :span="4" class="products_col">
                            购进金额（万元）
                        </el-col>
                        <el-col :span="4" class="products_col">
                            购进金额（万元）
                        </el-col>
                        <el-col :span="4" class="products_col">
                            购进金额（万元）
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="products_row2">
                        <el-col :span="3">
                            <el-input v-model="input4" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-input v-model="input5" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-input v-model="input6" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-input v-model="input7" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="input8" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="input9" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="input10" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="products_row3">
                        <el-col :span="3" class="products_col">
                            分销奖励
                        </el-col>
                        <el-col :span="3" class="products_col">
                            费用科目
                        </el-col>
                        <el-col :span="3" class="products_col">
                            零售配送
                        </el-col>
                        <el-col :span="3" class="products_col">
                            费用科目
                        </el-col>
                        <el-col :span="3" class="products_col">
                            医疗配送商
                        </el-col>
                        <el-col :span="3" class="products_col">
                            费用科目
                        </el-col>
                        <el-col :span="3" class="products_col">
                            自定义7
                        </el-col>
                        <el-col :span="3" class="products_col">
                            自定义8
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="products_row4">
                        <el-col :span="3" class="products_col">
                            <el-input v-model="input11" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-select v-model="value4" placeholder="单选框1" class="option">
                                <el-option class="option" v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-input v-model="input12" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-select v-model="value5" placeholder="指定渠道" class="option">
                                <el-option class="option" v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-input v-model="input13" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-select v-model="value6" placeholder="指定渠道" class="option">
                                <el-option class="option" v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-input v-model="input14" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                        <el-col :span="3" class="products_col">
                            <el-input v-model="input15" class="products_ipt" placeholder="请输入"></el-input>
                        </el-col>
                    </el-row>
                </el-row>
            </el-form>
        </div>
        <div class="box_dashed">
            <div class="box_dashed_box"></div>
            <div class="box_dashed_txt">
                <div class="box_dashed_txt_img">3</div>
                <div class="box_dashed_txt_txt">补充协议</div>
            </div>
            <div class="box_dashed_box"></div>
        </div>
        <div class="box_supplement">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="用户管理" name="first">
                    <div class="supplement_top">
                        <span>协议内容：</span>
                        <el-tag type="warning">删除</el-tag>
                    </div>
                    <textarea class="textateaTxt"></textarea>
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs>
            <el-button type="primary" class="supplement_btn">新增</el-button>
        </div>
        <div class="box_footer">
            <el-button type="primary" class="footer_btn">保存</el-button>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            activeName: 'first',
            ruleForm: {

            },
            input: '',
            input1: '',
            input2: '2020-02-01 18:25',
            input3: '2020-02-01～2020-05-01',
            input4: '',
            input5: '',
            input6: '',
            input7: '',
            input8: '',
            input9: '',
            input10: '',
            input11: '',
            input12: '',
            input13: '',
            input14: '',
            input15: '',
            options: [{
                value: 1,
                label: "正常"
            }, {
                value: 2,
                label: '异常'
            }],
            options1: [{
                value: 1,
                label: "金额"
            }, {
                value: 2,
                label: '数量'
            }],
            options2: [{
                value: 1,
                label: "金额"
            }, {
                value: 2,
                label: '数量'
            }],
            options3: [{
                value: 1,
                label: "指定渠道"
            }, {
                value: 2,
                label: '选择渠道'
            }],
            value: 1,
            value1: 1,
            value2: 1,
            value3: 1,
            value4: '单选框',
            value5: '多选框1',
            value6: '多选框1',
            rules: {

            }
        }
    },
    methods: {
    }
}
</script>
<style lang="less" scoped>
.row {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

.col {
    padding: 0 !important;
    margin: 0 !important;
    height: 41px !important;
}

.col_txt {
    font-size: 14px;
    line-height: 40px;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col_txt_tx1 {
    font-weight: 700;
}

.box {
    background-color: #f5f5f5;
   padding-bottom:700px;
}

.box_top {
    padding-top: 20px;
    padding-left: 32px;
    height: 84px;
    border-bottom: 1px solid #ebebeb;
}

.title {
    font-size: 20px;
    line-height: 48px;
    color: #343434;
}

.box_dashed {
    margin: 0 22px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_dashed_txt {
    margin: 0 42px;
    width: 102px;
    display: flex;
}

.box_dashed_txt_txt {
    width: 74px;
    font-size: 18px;
    line-height: 18px;
    color: #333333;
}

.box_dashed_txt_img {
    width: 20px;
    height: 20px;
    background-color: #4e8bff;
    text-align: center;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
}

.box_dashed_box {
    width: 100%;
    border-bottom: 2px dashed #e8e8e8;
}

.box_bottom {
    margin: 0 22px;
    border-radius: 6px;
    background-color: #fff;
    padding: 10px 0;
}

.box_bottom1 {
    margin: 0 22px 10px;
}

.form_btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    margin-right: 12px;
    overflow: hidden;
}

.form_txt {
    margin-left: 12px;
}

.form_select {
    width: 100%;
}

.option {
    font-size: 12px;
}

.tab_row {
    height: 30px !important;
    background-color: #f8f8f8;
    ;
}

.tab_col1 {
    font-size: 14px;
    line-height: 30px;
    color: #676767;
    font-weight: 700;
}

.tab_row1 {
    height: 30px !important;
    border-bottom: 1px solid #e5e5e5;
}

.tab_col2 {
    font-size: 14px;
    line-height: 30px;
    color: #676767;
}

.txt_color {
    color: #659bff;
}

// 产品策略
.products_top {
    border-bottom: 2px solid #eeeeee;
}

.products_center {
    margin: 14px;
    border: 1px solid #dddddd;
    border-radius: 6px;
}

.el-form-item1 {
    margin-bottom: 10px;
}

.products_col {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}

.products_row1 {
    background-color: #f8f8f8;
    border-bottom: 1px solid #dddddd;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.products_row2 {
    padding-top: 5px;
    height: 50px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #dddddd;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.products_row3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: #f8f8f8;
    padding-left: 16px;
    padding-right: 16px;
}

.products_row4 {
    padding-top: 5px;
    height: 50px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}
.box_supplement{
    position: relative;
    margin:0 22px 168px;
    overflow: hidden;
}
.supplement_btn{
    position: absolute;
    right:0;
    top:0px;
}
.supplement_top{
    display: flex;
    justify-content: space-between;
}
.textateaTxt{
    width: 98%;
    height: 100%;
    margin:0 10px; 
    outline: none;
    height: 140px;
    background-color: #f8f8f8;
    border:1px solid #ededed;
    margin-top:10px;
    resize:none;
}
.box_footer{
    position: fixed;
    bottom:0;
    z-index: 3;
    width: 100%;
    height:85px;
    background-color:#fff;
}
.footer_btn{
    margin:20px 0 0 28px;
}
</style>
  